<script setup lang="ts">
const toast = useToast()

const email = ref('')
const code = ref('')
const newPassword = ref('')
const loadingSend = ref(false)
const loadingReset = ref(false)
const countdown = ref(0)
const error = ref('')

const startCountdown = () => {
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
}

async function sendCode() {
  if (!email.value) {
    error.value = '请输入邮箱地址'
    return
  }
  loadingSend.value = true
  error.value = ''
  try {
    await $fetch('/api/password/send', {
      method: 'POST',
      body: { email: email.value }
    })
    toast.add({
      title: '验证码已发送',
      description: '请前往邮箱查收验证码',
      color: 'success',
      icon: 'i-lucide-check-circle'
    })
    startCountdown()
  } catch (err: any) {
    error.value = err?.data?.statusMessage || '发送验证码失败'
  } finally {
    loadingSend.value = false
  }
}

async function handleReset() {
  if (!email.value || !code.value || !newPassword.value) {
    error.value = '请完整填写邮箱、验证码和新密码'
    return
  }
  loadingReset.value = true
  error.value = ''
  try {
    await $fetch('/api/password/reset', {
      method: 'POST',
      body: { email: email.value, code: code.value, newPassword: newPassword.value }
    })
    toast.add({
      title: '重置成功',
      description: '请使用新密码登录',
      color: 'success',
      icon: 'i-lucide-check-circle'
    })
    await navigateTo('/login')
  } catch (err: any) {
    error.value = err?.data?.statusMessage || '密码重置失败'
  } finally {
    loadingReset.value = false
  }
}

useHead({ title: '重置密码' })
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <NuxtLink to="/login" class="inline-flex items-center gap-2 text-primary hover:text-primary-600 transition-colors">
          <UIcon name="i-lucide-arrow-left" class="w-5 h-5" />
          <span>返回登录</span>
        </NuxtLink>
        <h2 class="mt-6 text-3xl font-extrabold text-gray-900 dark:text-white">重置密码</h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">输入邮箱获取验证码，验证后设置新密码</p>
      </div>

      <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
        <form class="space-y-6" @submit.prevent="handleReset">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">邮箱地址</label>
            <div class="mt-1">
              <input
                id="email"
                v-model="email"
                type="email"
                required
                class="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                placeholder="请输入邮箱地址"
              />
            </div>
          </div>

          <div>
            <label for="code" class="block text-sm font-medium text-gray-700 dark:text-gray-300">验证码</label>
            <div class="mt-1 flex gap-2">
              <input
                id="code"
                v-model="code"
                type="text"
                required
                class="flex-1 appearance-none relative block px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                placeholder="请输入验证码"
              />
              <button
                type="button"
                :disabled="loadingSend || countdown > 0 || !email"
                class="px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                @click="sendCode"
              >
                {{ countdown > 0 ? `${countdown}s` : '发送验证码' }}
              </button>
            </div>
          </div>

          <div>
            <label for="newPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300">新密码</label>
            <div class="mt-1">
              <input
                id="newPassword"
                v-model="newPassword"
                type="password"
                required
                class="appearance-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-700 rounded-md focus:outline-none focus:ring-primary focus:border-primary focus:z-10 sm:text-sm"
                placeholder="请输入新密码"
              />
            </div>
          </div>

          <div v-if="error" class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
            <div class="flex">
              <UIcon name="i-lucide-alert-circle" class="flex-shrink-0 h-5 w-5 text-red-400" />
              <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">{{ error }}</h3>
              </div>
            </div>
          </div>

          <div>
            <button
              type="submit"
              :disabled="loadingReset"
              class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <UIcon v-if="loadingReset" name="i-lucide-loader-2" class="animate-spin -ml-1 mr-2 h-4 w-4" />
              {{ loadingReset ? '重置中...' : '确认重置' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

